<template>
  <div id="app">
    <Header 
      v-model="searchValue" 
      :nav-routes="navRoutes"
      :active-path="activePath"
      @on-change="handleChange" 
      @on-select="handleSelect"
    />
    <Main />
  </div>
</template>

<script>
import Header from './views/Header'
import Main from './views/Main'


export default {
  name: 'App',
  components: {
    Header,
    Main
  },
  data() {
    return {
      searchValue: '',
      // path 和 name 对应 route 里的 path name
      activePath: '/1',
      navRoutes: [
        {
          path: '/1',
          name: '1',
          label: '学院首页'
        },
        {
          path: '/2',
          name: '2',
          label: '学院概况'
        },
        {
          path: '/3',
          name: '3',
          label: '师资队伍'
        },
        {
          path: '/4',
          name: '4',
          label: '学院专业'
        },
        {
          path: '/5',
          name: '5',
          label: '教学科研'
        },
        {
          path: '/6',
          name: '6',
          label: '建档工作'
        },
        {
          path: '/7',
          name: '7',
          label: '团学工作'
        },
        {
          path: '/8',
          name: '8',
          label: '文档下载'
        },
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleSelect(route) {
      this.activePath = route.path
      console.log(route)
    }
  },
}
</script>

<style>
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

#app {
  font-size: 16px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}
</style>